<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    ul,
    li {
      list-style: none;
    }

    #week {
      width: 350px;
      height: 350px;
      border: 1px solid #ccc;
    }

    #week h6 {
      font-size: 20px;
      overflow: hidden;
      height: 40px;
      line-height: 40px;
    }

    #week h6 div {
      float: left;
      width: 250px;
      text-align: center;
    }

    #week .prev {
      float: left;
      font-size: 12px;
      width: 50px;
      cursor: pointer;
    }

    #week .next {
      float: right;
      font-size: 12px;
      width: 50px;
      cursor: pointer;
    }

    #week p span {
      width: 50px;
      float: left;
      text-align: center;
      height: 30px;
      line-height: 30px;
    }

    #week p {
      background: #ccc;
      overflow: hidden;
      height: 30px;
    }

    #week ul {
      margin-top: 10px;
    }

    #week ul li {
      width: 50px;
      float: left;
      text-align: center;
      height: 30px;
      cursor: pointer;
    }
  </style>
  <script>
    function currentWeek(ele) {
      var obj = offset(ele);
      var x = obj.left;
      var y = obj.top + ele.offsetHeight + 1;

      // 创建日历界面
      if (!document.getElementById('week')) {
        var oDiv = document.createElement('div');
        document.body.appendChild(oDiv);
        oDiv.id = 'week';

        oDiv.style.top = y + "px";
        oDiv.style.left = x + "px";

        // 创建日历title
        var h6 = document.createElement('h6');
        oDiv.appendChild(h6);
        var prev = document.createElement('div');
        h6.appendChild(prev);
        prev.className = 'prev';
        prev.innerHTML = '上个月';
        var content = document.createElement('div');
        content.className = "content";
        h6.appendChild(content);
        var next = document.createElement('div');
        h6.appendChild(next);
        next.className = 'next';
        next.innerHTML = '下个月';

        // 创建星期日到星期六的文字行
        var oPs = document.createElement('p');
        oPs.className = "rlTitle";
        oDiv.appendChild(oPs);
        var opsCont = ['日', '一', '二', '三', '四', '五', '六'];
        for (var i = 0; i <= 6; i++) {
          var oSpan = document.createElement('span');
          oPs.appendChild(oSpan);
          oSpan.innerHTML = opsCont[i];
        }

        // 创建日历上面的日期行数所需要的变量
        var oUl = document.createElement('ul');
        oUl.className = "rlCenter";
        oDiv.appendChild(oUl);
        var currentDate = new Date();
        var currentYear = currentDate.getFullYear();
        var currentMonth = currentDate.getMonth();

        active(currentMonth);
        // 创建日历上下翻月
        prev.onclick = function () {
          active(--currentMonth);
        };
        next.onclick = function () {
          active(++currentMonth);
        };

      }
      // 动态创建日历上面日期，变包装成方法
      function active(m) {
        oUl.innerHTML = '';
        var activeDate = new Date(currentYear, m, 1);
        var year = activeDate.getFullYear();
        var month = activeDate.getMonth();
        content.innerHTML = year + '年' + (month + 1) + '月';

        // 创建日历上面的日期行数
        var n = 1 - activeDate.getDay();
        if (n == 1) {
          n = -6;
        }
        // 如果n为负数，则减少月份.在用这个月最后一天减去这个值就可以获得日历从哪天开始的。
        activeDate.setDate(n);
        for (var i = 0; i < 42; i++) {
          var oLi = document.createElement('li');
          oUl.appendChild(oLi);
          var date = activeDate.getDate();
          oLi.innerHTML = date;

          // 这里必须是activeDate.getMonth()+1，不能用m+1。因为这个是一直变化的。要不然日历不管点哪天都是属于当前月份的。
          oLi.dateValue = year + "-" + (activeDate.getMonth() + 1) + "-" + date;
          oLi.onclick = function () {
            ele.value = this.dateValue;
            document.body.removeChild(oDiv);
            oDiv = null;
          };
          if (activeDate.getMonth() != month) {
            // 不是本月的天数颜色变成灰色
            oLi.style.color = "#ccc";
          }
          //如果超出该月份应有的天数则增加月份
          activeDate.setDate(date + 1);
        }
      }
    }

    function offset(ele) {
      var l = ele.offsetLeft;
      var t = ele.offsetTop;
      var p = ele.offsetParent;
      while (p) {
        if (window.navigator.userAgent.indexOf("MSIE 8") > -1) {
          l += p.offsetLeft;
          t += p.offsetTop;
        } else {
          l += p.offsetLeft + p.clientLeft;
          t += p.offsetTop + p.clientTop;
        }
        p = p.offsetParent;
      }
      return {
        left: l,
        top: t
      }
    }
  </script>
</head>

<body>
  <p>原生js开发的日历插件</p>
  <input type="text" id="ele" onfocus="currentWeek(this)" />
</body>

</html>